<template>
  <div class="left">
    <h2>Left组件</h2>
    <p>接收到的name是：{{ name }}</p>
    <p>接收到的ming是：{{ ming }}</p>
    <p>接收到的age是：{{ nianling }}</p>
    <p>接收到的info是：{{ info }}</p>
    <button @click="nianling++">修改转存后的ninaling</button>
    <Article></Article>
  </div>
</template>

<script>
export default {
  // 使用 props 接收父组件传递过来的数据
  // props可以写数组格式(简单)，也可以是对象格式(复杂)
  // props 中的值，是不允许修改的。
  // props: ['name', 'ming', 'age', 'info'],
  props: {
    name: {},
    ming: {},
    age: {
      default: 100, // 假设父组件没有给我age的值，则使用默认的100
      type: Number, // 类型约束(Number、String、Boolean、Array、Object)
      // type: [Number, String] // 类型约束，允许多个类型写数组格式
      required: true // 表示这项必填（必须给我传值）
    },
    info: {}
  },
  data() {
    return {
      nianling: this.age
    }
  }
}
</script>

<style lang="less" scoped>
.left {
  background-color: darkorange;
}
</style>
